<!--
 * @Author: lijilong
 * @Date: 2024-06-14 12:20:51
 * @LastEditors: lijilong lijilong@thwater.com
 * @LastEditTime: 2024-09-09 08:34:27
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<route lang="json5">
	{
	layout: 'default',
	style: {
	navigationBarTitleText: '需求反馈',
	enablePullDownRefresh: false,
	navigationStyle: 'custom',
	},
	}
</route>

<template>
    <page-meta :root-font-size="setting.rootFontSize"></page-meta>
    <view style="display: flex; height: 100vh; flex-direction: column; background-color: #f2f2f1">
        <view style="position: sticky; top: 0; z-index: 9999">
            <wd-navbar title="需求反馈" :bordered="false" safeAreaInsetTop>
                <template #left>
                    <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
                </template>
            </wd-navbar>
        </view>
        <view style="flex: 1; overflow-y: auto">
            <th-card title="需求单信息">
                <th-form>
                    <th-form-item label="项目名称" v-if="form.petitionName">
                        <text class="text">{{ form.petitionName }}</text>
                    </th-form-item>
                    <th-form-item label="需求产品名称">
                        <text v-text="form.invName"></text>
                    </th-form-item>
                    <th-form-item label="需求产品规格">
                        <text v-text="form.invStd"></text>
                    </th-form-item>
                    <th-form-item label="客户">
                        <text class="text">{{ form.cusName }}</text>
                    </th-form-item>
                    <th-form-item label="业务员">
                        <text class="text">{{ form.personName }}</text>
                    </th-form-item>
                    <th-form-item label="需求描述">
                        <text class="text">{{ form.demandDesc }}</text>
                    </th-form-item>
                    <template v-if="showMoreDemand">
                        <th-form-item label="用途">
                            <text class="text">{{ form.applicationType }}</text>
                        </th-form-item>
                        <th-form-item label="业务部门">
                            <text class="text">{{ form.deptName }}</text>
                        </th-form-item>
                        <th-form-item label="所属公司">
                            <text class="text seq-no-text">{{ form.tenantName }}</text>
                        </th-form-item>
                        <th-form-item label="要求完成时间">
                            <text class="text">{{ form.askCompleteTime }}</text>
                        </th-form-item>
                        <th-form-item label="是否外来样">
                            <text class="text">{{ form.cusFlag ? '是' : '否' }}</text>
                        </th-form-item>
                        <th-form-item label="年需求量/吨">
                            <text class="text">{{ form.invDemand }}</text>
                        </th-form-item>

                    </template>
                    <view class="exportModel" @click="showMoreDemand = !showMoreDemand">
                        <text>{{ showMoreDemand ? '收起' : '展开' }}</text>
                    </view>

                </th-form>
            </th-card>
            <th-card title="回复信息">
                <th-form>
                    <th-form-item label="回复信息">
                        <wd-textarea type="textarea" auto-height v-model="form.reply" placeholder=" " clearable
                            style="width: 100%" no-border></wd-textarea>
                    </th-form-item>
                </th-form>
            </th-card>
            <th-card title="检验结果">
                <th-table :columns="checkColumns" stripe multiple :dataList="form.rdReplyFileList"
                    ref="multipleTable"></th-table>
            </th-card>
            <th-card title="附件">
                <th-table :columns="columns" stripe multiple :dataList="form.rdReplyFileList" ref="multipleTable">
                    <template v-slot:viewFile="{ scope }">
                        <text @click="previewFileHandle(scope.row.fileUrl)" style="color:#2e5cf6">{{ scope.row.fileName
                        }}</text>
                    </template>
                    <template v-slot:action="{ scope }">
                        <uploadFile @complete="(ref) => uploadComplete(ref, scope)"></uploadFile>
                    </template>

                </th-table>
            </th-card>
        </view>
        <view class="flow-btn-fixed" v-if="form.id && [0, 3].includes(form.status)">
            <view class="btn_group" style="width: 100%">
                <view class="btn primary" @click="onRevokeShow" v-if="form.id">
                    <image src="../../../static/rovoke.png" class="btn-icon"></image>
                    开启
                </view>
                <view class="btn primary" @click="onReviveShow" v-if="form.id">
                    <image src="../../../static/rovoke1.png" class="btn-icon"></image>
                    关闭
                </view>
                <view class="btn primary" @click="handleSubmit">
                    <image src="../../../static/tongyi.png" class="btn-icon"></image>
                    提交
                </view>
                <view class="btn danger" @click="handleSave">
                    <image src="../../../static/reject.png" class="btn-icon"></image>
                    保存
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useSetting } from '@/stores/setting';
import { getObj, putObj, addObj, submitProcess } from '@/service/reply';
import thTable from '../assay-report/component/th-table.vue';
import { computed } from 'vue';

const setting = useSetting();
const showMoreDemand = ref(false)
// 提交表单数据
const form: any = reactive({
    id: null,
    rdReplyFileList: []
});

const checkColumns = computed(() => {
    return []
})


const columns = computed(() => {
    // if (form.status == 2) {
    //     return [
    //         { label: '附件名称', prop: 'fileName', render: 'viewFile', align: 'center', width: 200 },
    //         { label: '附件描述', prop: 'remark', align: 'center', width: 200 },
    //     ]
    // }
    return [
        { label: '', type: 'selection', align: 'center', width: 50, fixed: true },
        { label: '附件名称', prop: 'fileName', render: 'viewFile', align: 'center', },
        { label: '附件描述', prop: 'remark', align: 'center', },
        {
            label: '操作',
            type: 'action',
            align: 'center',
            render: 'action',
            width: 80,
            fixed: 'right',
        },
    ]
})

const flowDetailsTableRef = ref();
const init = (params) => {
    uni.$off('pm-requirement-sign');
    uni.showLoading();
    getObj(params.id)
        .then((res) => {
            res.data.rdReplyFileList = res.data.rdReplyFileList?.map(item => {
                item.checked = item.checkFlag
                return item
            }) || []
            Object.assign(form, res.data);

            nextTick(() => {
                flowDetailsTableRef.value?.getFlowDetails();
            });
        })
        .finally(() => {
            uni.stopPullDownRefresh();
            uni.hideLoading();
        });
    // checkPost();
};


onLoad((options) => {
    if (options) {
        const id = options.id;
        init({
            id: id,
        });
    }

});
onPullDownRefresh(() => {
    init({
        id: form.id,
    });
});

const goBack = () => {
    uni.navigateBack();
};

const previewFileHandle = (file) => {
    uni.navigateTo({
        url: '/pages/pm/preview-online?url=' + file,
    });
};



const uploadComplete = (ref, paylod) => {
    const { url } = ref;
    paylod.row.url = url;
    // fileList.value.push({
    //     url: url,
    // });

}

/**
 * 保存
 */
const handleSave = async function () {
    uni.showLoading({
        mask: true,
    });
    try {
        let res;
        if (form.id) {
            res = await putObj(form);
        } else {
            res = await addObj(form);
        }
        if (res.code === 0) {
            uni.showToast({
                mask: true,
                title: `保存成功`,
                icon: 'none',
            });

            if (res.data) {
                init({ id: res.data });
            } else {
                init({ id: form.id });
            }
        } else {
            uni.showToast({
                mask: true,
                title: res.msg,
                icon: 'none',
            });
        }
    } catch (err) {
        uni.showToast({
            mask: true,
            title: err.msg || err.message || '保存失败',
            icon: 'none',
        });
    }
};

/**
 * 提交
 */
const handleSubmit = async () => {
    uni.showLoading({
        mask: true,
    });
    try {
        const res = await submitProcess(form);
        if (res.code === 0) {
            return uni.showToast({
                mask: true,
                title: res.msg,
                icon: 'none',
            });
        }

        uni.showToast({
            mask: true,
            title: res.msg || '操作成功',
            icon: 'none',
        });
        init({
            id: form.id,
        });
    } catch (error) {
        uni.showToast({
            mask: true,
            title: error.msg || error.message || '操作失败',
            icon: 'none',
        });
    }
}




</script>

<style lang="scss" scoped>
@import "../experiment/components/table.scss";

.block .content {
    padding: 0 !important;
}

.card-detail {
    padding: 0 !important;
}

.wd-cell {
    padding-left: 0 !important;
}

.wd-card__title {
    border-left: 4px solid #2e5cf6 !important;
}

.pm-table {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;

    .pm-title {
        box-sizing: border-box;
        padding-left: 20rpx;
        margin: 40rpx 0;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        border-left: 8rpx solid #2e5cf6;
        border-radius: 4rpx;
    }

    .pm-row {
        display: flex;
        min-height: 60rpx;
        border-bottom: 1px solid #f6f0f0;

        .pm-label {
            display: flex;
            align-items: center;
            width: 20%;
            font-size: 26rpx;
            color: #979494;
        }

        .pm-value {
            display: flex;
            flex: 1;
            align-items: center;
            font-size: 26rpx;
            color: #333;
        }
    }
}

.sign-main {
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // width: 100%;
    // margin: 20rpx 0;
    position: fixed;
    right: 0rpx;
    bottom: 40rpx;
    width: 160rpx;
    height: 80rpx;
    line-height: 80rpx;
    color: white;
    text-align: center;
    background-color: rgb(77 128 240);

    // border-radius: 50%;
    border-top-left-radius: 40rpx;
    border-bottom-left-radius: 40rpx;
}

:deep(.label) {
    width: 160rpx !important;
}

.viewTable {
    flex: auto;

    :deep() {
        .content {
            width: calc(100% - 80px);
        }
    }
}

.diabledStyle {
    :deep() {
        .wd-textarea__inner {
            color: #262626 !important;
        }
    }
}

:deep() {
    .wd-textarea {
        &::after {
            display: none !important;
        }
    }
}

.result-tag {
    padding: 6rpx 14rpx;
    margin: 2rpx 0;
    font-size: 24rpx;
    color: white;
    background-color: #87d068;
    border-radius: 4rpx;
}

.sign-main-show {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .sign-main-show-title {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80rpx;
        margin-bottom: 20rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #818181;
        border-bottom: 1px solid #e3e3e3;
    }

    .sign-main-show-line {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
        padding: 20rpx;
        margin-bottom: 20rpx;
        border: 4rpx solid #d0dbff;
        border-radius: 10rpx;
    }

    .sign-main-show-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 80rpx;
        border-top: 1px solid #e3e3e3;
    }
}

.info-list {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.info-list-main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10rpx;
    margin: 10rpx 0;
    border: 1px solid #e3e3e3;
    border-radius: 8rpx;

    .info-list-row {
        display: flex;
        width: 100%;

        .info-list-label {
            width: 150rpx;
            font-size: 28rpx;
            color: #808080;
        }

        .info-list-value {
            flex: 1;
            width: 0;
        }
    }
}

.viewLabel {
    position: relative;
    flex: 1;
    min-width: 16.875rem;
    padding: 0.5625rem 0;
    margin: 0 0.75rem;
    flex-shrink: 0;
    width: 3.75rem;
    font-size: 0.8125rem;
    line-height: 1;
    color: #666;
}

.craft-row-img {
    height: 80rpx;
    width: 80rpx;
}

.flow-btn-fixed {
    width: 100%;
    background-color: white;
    border-top: 1px solid #f2f2f1;
}

.exportModel {
    width: 100%;
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #409eff;
    text-align: center;
}

.btn_group {
    display: flex;
    justify-content: space-between;

    // margin: 0rpx 0 20rpx;
    // border-bottom: 1px solid #f2f2f1;

    .btn {
        display: flex;

        // width: 49%;
        flex: 1;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        // height: 40px;
        min-height: 40px;
        padding: 10rpx 0;
        font-size: 24rpx;
        color: black;

        // background-color: white !important;
        background-color: #dbecff !important;
        border-left: 1px solid #f7f7f7;
        border-radius: 0 !important;

        // color: white;
        border-radius: 6rpx;

        .btn-icon {
            width: 40rpx;
            height: 40rpx;
            margin-bottom: 8rpx;
        }
    }

    .danger {
        background-color: #f56c6c;
    }

    .primary {
        background-color: #409eff;
    }
}
</style>